<!-- 危化品车进出记录 -->
<template>
  <div class="dy-panel">
    <div class="dy-panel-main" style="width: 90vh">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closeCurrent"></div>
      </div>
       <div class="dy-panel-content">
        <contentTitle :title="'服务区基础信息'"></contentTitle>
        <div class="dy-form">
          <div class="dy-form-md6">
            <div class="dy-form-label">所属高速</div>
            <div class="dy-form-input"><input type="text" readonly v-model="fwqjcxx.ssgs"></div>
          </div>
          <div class="dy-form-md6">
            <div class="dy-form-label">服务区建成时间</div>
            <div class="dy-form-input"><input type="text" readonly v-model="fwqjcxx.jcsj"></div>
          </div>
          <div class="dy-form-md6">
            <div class="dy-form-label">行政区属地</div>
            <div class="dy-form-input"><input type="text" readonly v-model="fwqjcxx.xzqsd"></div>
          </div>
          <div class="dy-form-md6">
            <div class="dy-form-label">投入运营时间</div>
            <div class="dy-form-input"><input type="text" readonly v-model="fwqjcxx.jcsj"></div>
          </div>
          <div class="dy-form-md6">
            <div class="dy-form-label">路段</div>
            <div class="dy-form-input"><input type="text" readonly v-model="fwqjcxx.sectionname"></div>
          </div>
          <div class="dy-form-md6">
            <div class="dy-form-label">经营模式</div>
            <div class="dy-form-input"><input type="text" readonly v-model="fwqjcxx.jyms"></div>
          </div>
          <div class="dy-form-md6">
            <div class="dy-form-label">桩号</div>
            <div class="dy-form-input"><input type="text" readonly v-model="fwqjcxx.zh"></div>
          </div>
          <div class="dy-form-md6">
            <div class="dy-form-label">服务区经理</div>
            <div class="dy-form-input"><input type="text" readonly v-model="fwqjcxx.fwqjl"></div>
          </div>
          <div class="dy-form-md6">
            <div class="dy-form-label">充电车位</div>
            <div class="dy-form-input"><input type="text" readonly v-model="fwqjcxx.cdcw"></div>
          </div>
          <div class="dy-form-md6">
            <div class="dy-form-label">公众服务电话</div>
            <div class="dy-form-input"><input type="text" readonly v-model="fwqjcxx.gzfwdh"></div>
          </div>
          <div class="dy-form-md6">
            <div class="dy-form-label">危化品车位</div>
            <div class="dy-form-input"><input type="text" readonly v-model="fwqjcxx.whpcw"></div>
          </div>
          <div class="dy-form-md6">
            <div class="dy-form-label">总占地面积</div>
            <div class="dy-form-input"><input type="text" readonly v-model="fwqjcxx.zzdmj"></div>
          </div>
          <div class="dy-form-md6">
            <div class="dy-form-label">普通货车位</div>
            <div class="dy-form-input"><input type="text" readonly v-model="fwqjcxx.pthcw"></div>
          </div>
          <div class="dy-form-md6">
            <div class="dy-form-label">建筑面积</div>
            <div class="dy-form-input"><input type="text" readonly v-model="fwqjcxx.jzmj"></div>
          </div>
          <div class="dy-form-md6">
            <div class="dy-form-label">大型客车位</div>
            <div class="dy-form-input"><input type="text" readonly v-model="fwqjcxx.dxkcw"></div>
          </div>
          <div class="dy-form-md6">
            <div class="dy-form-label">餐饮面积</div>
            <div class="dy-form-input"><input type="text" readonly v-model="fwqjcxx.cymj"></div>
          </div>
          <div class="dy-form-md6">
            <div class="dy-form-label">小型客车位</div>
            <div class="dy-form-input"><input type="text" readonly v-model="fwqjcxx.xxkcw"></div>
          </div>
          <div class="dy-form-md6">
            <div class="dy-form-label">超市面积</div>
            <div class="dy-form-input"><input type="text" readonly v-model="fwqjcxx.bldmj"></div>
          </div>
          <div class="dy-form-md6">
            <div class="dy-form-label">大型货车位</div>
            <div class="dy-form-input"><input type="text" readonly v-model="fwqjcxx.dxhcw"></div>
          </div>
          <div class="dy-form-md6">
            <div class="dy-form-label">加油站面积</div>
            <div class="dy-form-input"><input type="text" readonly v-model="fwqjcxx.jyzmj"></div>
          </div>
          <div class="dy-form-md12">
            <div class="dy-form-label">服务功能</div>
            <div class="dy-form-input" >
              <el-checkbox-group v-model="checkList">
                <el-checkbox label="加油"></el-checkbox>
                <el-checkbox label="加气"></el-checkbox>
                <el-checkbox label="充电"></el-checkbox>
                <el-checkbox label="餐饮"></el-checkbox>
                <el-checkbox label="商超"></el-checkbox>
                <el-checkbox label="客房"></el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {computed, getCurrentInstance, onMounted, ref} from "vue";
import ContentTitle from "../contentTitle.vue";
import {ajaxRequest} from "../../../api/code.js";
const chart = getCurrentInstance().proxy.$echarts

const emit = defineEmits(['closeChild']);
const closeCurrent = function (){
  emit('closeChild')
}

const checkList = ref(['加油', '加气',"物业"])
const fwqjcxx = ref({
  ssgs : "沈海高速"
})

onMounted(() => {
  getFwqjcxx()
})

async function getFwqjcxx() {
  checkList.value = []
  const result = await ajaxRequest('post', 'getFwqjcxxZhkbfwq', {})
  if (result.data && result.data.length > 0) {
    fwqjcxx.value = result.data[0]
    if (fwqjcxx.value.jyflag && "1" === fwqjcxx.value.jyflag) {
      checkList.value.push("加油")
    }
    if (fwqjcxx.value.jqflag && "1" === fwqjcxx.value.jqflag) {
      checkList.value.push("加气")
    }
    if (fwqjcxx.value.cdflag && "1" === fwqjcxx.value.cdflag) {
      checkList.value.push("充电")
    }
    if (fwqjcxx.value.cyflag && "1" === fwqjcxx.value.cyflag) {
      checkList.value.push("餐饮")
    }
    if (fwqjcxx.value.scflag && "1" === fwqjcxx.value.scflag) {
      checkList.value.push("商超")
    }
    if (fwqjcxx.value.kfflag && "1" === fwqjcxx.value.kfflag) {
      checkList.value.push("客房")
    }
  }
}
</script>

<style scoped>
  .dy-panel-main{
    padding:2.5vh;
  }
  .dy-form{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    .dy-form-md12{
      width: 100%;
      display: flex;
      font-size: 12px;
      .dy-form-label{
        width: 100px;
        color: #00FFFF;
        padding-top: 5px;
      }
    }
    .dy-form-md6{
      display: flex;
      width: 50%;
      line-height: 40px;
      font-size: 12px;
      .dy-form-label{
        width: 100px;
        color: #00FFFF;
      }
      .dy-form-input{
        input{
          background: #284C4D;
          border: none;
          color: white;
          padding: 3px 5px;
          font-size: 12px;
        }
      }
    }
  }
:deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
    color: #00ffff;
  }
:deep(.el-checkbox){
  --el-checkbox-checked-text-color: #00ffff;
  --el-checkbox-checked-input-border-color: #00ffff;
  --el-checkbox-checked-bg-color: #00ffff;
}
</style>
